<!DOCTYPE HTML>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <title>Viva商城登录界面</title>
<!--  设置边栏。搜索框等-->
    <th:block th:insert="~{sys/common/include::head}"></th:block>
    <style>
        body{
            background-color: #1a8e8c;
            background-repeat: no-repeat;
            background-position: center center;
            background-size: cover;
        }
        .content-main{
            background-color: transparent;
        }
        #captcha-img{
            margin-left: 5px;
        }
    </style>

</head>

<body>

<section class="content-main mt-80">
    <div class="card mx-auto card-login">
        <div class="card-body">
            <h4 class="card-title mb-4">登录</h4>
            <form id="login-form" class="layui-form" lay-filter="login-form">
                <div class="mb-3">
                    <input class="form-control" name="username" value="admin0" lay-verify="required|username" lay-reqtext="用户名不可为空"
                           placeholder="用户名" type="text">
                </div> <!-- form-group// -->
                <div class="mb-3">
                    <input class="form-control" name="password" value="123456" lay-verify="required" lay-reqtext="密码不可为空"
                           placeholder="密码" type="password">
                </div> <!-- form-group// -->
                <div class="mb-3 d-flex align-items-center">
                    <input class="form-control" name="captcha"style="width: 200px" lay-verify="required" lay-reqtext="验证码不可为空"
                           placeholder="验证码" type="text">
                    <image id="captcha-img" th:src="@{/vm/sys/captcha}" alt="验证码"></image>
                </div> <!-- form-group// -->
                <div class="mb-3">
                    <a href="#" class="float-end font-sm text-muted">忘记密码?</a>
                    <label class="form-check">
                        <input type="checkbox" class="form-check-input" checked="">
                        <span class="form-check-label">记住我</span>
                    </label>
                </div> <!-- form-group form-check .// -->
                <div class="mb-4">
                    <button id="login-btn" class="btn btn-primary w-100" type="button"> 登录</button>
                </div> <!-- form-group// -->
            </form>

            <p class="text-center mb-4">没有账号? <a href="/vm/sys/register">注册</a></p>
        </div>
    </div>
</section>
<footer class="main-footer text-center">
    <p class="font-xs">
        <script>
            document.write(new Date().getFullYear())
        </script>
        ©, Viva商城 .
    </p>
    <div class="col-sm-6">
        <div class="text-sm-end">
            All rights reserved
        </div>
    </div>
</footer>
<div th:insert="~{sys/common/include::scripts}"></div>
<script th:src="@{/assets/sys/common/js/login.js}"></script>
</body>

</html>